<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/car-rental-bg-image.css"/>
    <link rel="icon" href="img/png/Icon.png">

    <title>Car Rental</title>
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark fw-bold"
     style="background-color: #000; color: #FFF; font-family: Roboto, sans-serif;">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="img/png/Logo.png" alt="Logo" width="140" height="36">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="html/about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="html/all.html">Rent</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="html/service.html">Services</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Upss!</a>
                    <ul class="dropdown-menu dropdown-menu-dark">
                        <li><a class="dropdown-item" href="html/auth/users.html">Users</a></li>
                        <li><a class="dropdown-item" href="#">Loans</a></li>
                        <li><a class="dropdown-item" href="html/own.html">Own</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="html/owe.html">Owe</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <span class="d-none d-md-block navbar-text me-4">
            Sign Up
        </span>
        <span class="d-none d-md-block navbar-text me-3 border-primary border rounded-pill px-3 bg-primary fw-bold"
              style="color: #FFF">
            <a href="html/signin.html" class="text-decoration-none">Sign In</a>
        </span>
    </div>
</nav>

<section id="car-rental-bg-image-cover" class="bg-dark p-5">
    <div class="text-center text-white m-sm-5 px-sm-5">
        <h1 class="fw-light">WELCOME TO GARAGE</h1>
        <h2 class="fw-bold">BOOK A CAR TODAY! SAVE UP TO 30%</h2>
        <p class="mt-5 text-muted">Garage makes car renting an easy matter, even if you are renting out a sports coupe
            for a weekend ride.
            We will make sure your car will fit your specific needs!</p>

        <button class="btn btn bg-primary text-white">FIND A CAR</button>
    </div>
</section>

<section class="p-3 p-sm-5">
    <h3 class="my-5 text-center">LET’S FIND YOUR PERFECT CAR</h3>

    <form class="col-sm-5 col-10 mx-auto">
        <select class="form-select my-2 border-start-0 border-end-0 border-top-0">
            <option selected>Car Type</option>
        </select>

        <select class="form-select my-2 border-start-0 border-end-0 border-top-0">
            <option selected>Pick-up Location</option>
        </select>

        <select class="form-select my-2 border-start-0 border-end-0 border-top-0">
            <option selected>Date</option>
        </select>

        <div class="text-center">
            <button class="btn btn-dark text-white mt-5">Search Now</button>
        </div>
    </form>
</section>

<section class="row row-cols-1 row-cols-sm-2 row-cols-xxl-3 text-center mx-sm-5 p-5 p-xxl-5">
    <div class="col border-top py-3">
        <img class="img-fluid rounded-3" src="img/jpg/Volkswagen.jpg" alt="Vehicle">
        <h4 class="mt-3">Volkswagen Polo Golf VII</h4>
        <p>$20.00 per day</p>
        <div class="row gx-5 px-xxl-5 mx-xxl-5">
            <div class="btn-group">
                <button class="col-6 btn btn-primary">Rent</button>
                <button class="col-6 btn btn-outline-primary">More Info.</button>
            </div>
        </div>
    </div>

    <div class="col border-top py-3">
        <img class="img-fluid rounded-3" src="img/jpg/Tesla.jpg" alt="Vehicle">
        <h4 class="mt-3">Tesla Model S</h4>
        <p>$20.00 per day</p>
        <div class="row gx-5 px-xxl-5 mx-xxl-5">
            <div class="btn-group">
                <button class="col-6 btn btn-primary">Rent</button>
                <button class="col-6 btn btn-outline-primary">More Info.</button>
            </div>
        </div>
    </div>

    <div class="col border-top py-3">
        <img class="img-fluid rounded-3" src="img/jpg/BMW.jpg" alt="Vehicle">
        <h4 class="mt-3">BMW 640d</h4>
        <p>$20.00 per day</p>
        <div class="row gx-5 px-xxl-5 mx-xxl-5">
            <div class="btn-group">
                <button class="col-6 btn btn-primary">Rent</button>
                <button class="col-6 btn btn-outline-primary">More Info.</button>
            </div>
        </div>
    </div>

    <div class="col border-top py-3">
        <img class="img-fluid rounded-3" src="img/jpg/Audi.jpg" alt="Vehicle">
        <h4 class="mt-3">Audi TT</h4>
        <p>$20.00 per day</p>
        <div class="row gx-5 px-xxl-5 mx-xxl-5">
            <div class="btn-group">
                <button class="col-6 btn btn-primary">Rent</button>
                <button class="col-6 btn btn-outline-primary">More Info.</button>
            </div>
        </div>
    </div>

    <div class="col border-top py-3">
        <img class="img-fluid rounded-3" src="img/jpg/Honda.jpg" alt="Vehicle">
        <h4 class="mt-3">Honda CR-V IV</h4>
        <p>$20.00 per day</p>
        <div class="row gx-5 px-xxl-5 mx-xxl-5">
            <div class="btn-group">
                <button class="col-6 btn btn-primary">Rent</button>
                <button class="col-6 btn btn-outline-primary">More Info.</button>
            </div>
        </div>
    </div>

    <div class="col border-top py-3">
        <img class="img-fluid rounded-3" src="img/jpg/Series.jpg" alt="Vehicle">
        <h4 class="mt-3">BMW 2 Series Coupé</h4>
        <p>$20.00 per day</p>
        <div class="row gx-5 px-xxl-5 mx-xxl-5">
            <div class="btn-group">
                <button class="col-6 btn btn-primary">Rent</button>
                <button class="col-6 btn btn-outline-primary">More Info.</button>
            </div>
        </div>
    </div>
</section>

<section id="car-rental-bg-image-mustang"
         class="row row-cols-1 row-cols-sm-3 row-cols-xxl-4 bg-dark p-sm-5 text-center">
    <div class="col mt-5 px-xxl-5">
        <h5 class="text-white">01. Car Rentals</h5>

        <ul class="text-muted text-start small ms-5 pt-3 mb-5" style="list-style-type: none">
            <li class="pt-1">Economy</li>
            <li class="pt-1">Standard</li>
            <li class="pt-1">Premium/Luxury</li>
        </ul>

        <div class="text-white py-5 rounded mx-3" style="background-color: #1a1e21">
            <div class="fw-bold" style="font-size: 65px">10</div>
            <div>CAR TYPES</div>
        </div>
    </div>

    <div class="col mt-5 px-xxl-5">
        <h5 class="text-white">02. Easy Payment</h5>

        <ul class="text-muted text-start small ms-5 pt-3 mb-5" style="list-style-type: none">
            <li class="pt-1">Credit Cards</li>
            <li class="pt-1">PayPal</li>
            <li class="pt-1">Cheques</li>
        </ul>

        <div class="text-white py-5 rounded mx-3" style="background-color: #1a1e21">
            <div class="fw-bold" style="font-size: 65px">75</div>
            <div>CARS & VEHICLES</div>
        </div>
    </div>

    <div class="col mt-5 px-xxl-5">
        <h5 class="text-white">03. Benefits</h5>

        <ul class="text-muted text-start small ms-5 pt-3 mb-5" style="list-style-type: none">
            <li class="pt-1">Unlimited Mileage</li>
            <li class="pt-1">Full Insurance</li>
            <li class="pt-1">24/7 Assistance</li>
        </ul>

        <div class="text-white py-5 rounded mx-3" style="background-color: #1a1e21">
            <div class="fw-bold" style="font-size: 65px">20</div>
            <div>YEARS OF EXPERIENCE</div>
        </div>
    </div>

    <div class="col-12 mt-5 text-white px-xxl-5">
        <h3 class="mt-5">WHAT WE OFFER</h3>
        <p class="px-5 px-sm-0 px-xxl-5">Our company provides a variety of useful options to our new & regular
            clients.</p>
        <div class="text-start ms-5 ps-5">
            <img class="img-fluid ms-5" src="img/png/Firm.png">
        </div>
    </div>
</section>

<section class="row row-cols-1 row-cols-sm-3 p-5 m-5 text-center">
    <div class="col">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"
             class="bi bi-star text-primary" viewBox="0 0 16 16">
            <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
        </svg>

        <h5 class="mt-3">Premium Service</h5>
        <p class="text-muted mt-3">We provide high-quality service for all our clients.</p>
    </div>

    <div class="col">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"
             class="bi bi-geo-alt text-primary" viewBox="0 0 16 16">
            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
            <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
        </svg>

        <h5 class="mt-3">Variety of Locations</h5>
        <p class="text-muted mt-3">You can rent our cars throughout the Colombia.</p>
    </div>

    <div class="col">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"
             class="bi bi-people text-primary" viewBox="0 0 16 16">
            <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
        </svg>

        <h5 class="mt-3">Qualified Team</h5>
        <p class="text-muted mt-3">Our fully professional team can handle any car rental queries.</p>
    </div>
</section>

<section class="row p-5 mx-sm-5">
    <h3 class="px-xxl-5 display-6 me-xxl-5 mb-xxl-5"><span class="mx-xxl-5 px-xxl-5">TESTIMONIALS</span></h3>

    <div class="col-sm-6 col-xxl-4 offset-xxl-2 px-xxl-5">
        <p class="h5 fw-light fw-lighter mt-3 lh-base"
           style='font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;'>
            The car I rented from you was immaculate and it performed really well. I would definitely use your company
            again in the future.</p>
        <p class="fw-bold mt-4 text-end me-5">JOHN SMITH</p>
    </div>

    <div class="col-sm-6 col-xxl-4 px-xxl-5">
        <p class="h5 fw-light fw-lighter mt-3 lh-base"
           style='font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;'>
            Thank your providing the car for us. It was a great and reliable sedan. I’m going to recommend you to our
            friends and colleagues.</p>
        <p class="fw-bold mt-4 text-end me-5">KATE WILLIAMS</p>
    </div>
</section>

<section class="p-3 p-sm-5 bg-white">
    <div class="text-center p-3">
        <img src="img/jpg/First.jpg" alt="People" class="img-fluid"/>
        <img src="img/jpg/Second.jpg" alt="People" class="img-fluid"/>
        <img src="img/jpg/Third.jpg" alt="People" class="img-fluid"/>
        <img src="img/jpg/Four.jpg" alt="People" class="img-fluid"/>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 p-5 mx-xxl-5">
        <div class="col px-xxl-5">
            <h4 class="fw-lighter">OUR TEAM</h4>
            <p class="text-muted mt-5">We are a dedicated team of car rental experts who are always glad to help you
                choose the car according to your needs.</p>
        </div>

        <div class="col px-xxl-5">
            <h1 class="display-1">24 <span class="h6">TEAM MEMBERS</span></h1>
            <p class="mt-3">28 exceptional full-time professionals</p>
            <p>5-year specialized team member practice</p>
        </div>
    </div>
</section>


<section class="p-3 p-sm-5 bg-light">
    <h3 class="px-5 mx-sm-5">GET IN TOUCH WITH US</h3>

    <p class="px-5 mx-sm-5 mt-3 text-muted">Feel free to contact our specialists to find out more about our cars and
        prices. We are always ready to answer your questions.</p>

    <form class="px-sm-5 m-5">
        <label class="col-12 col-xxl-3 offset-xxl-1">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="Name">
        </label>

        <label class="col-12 col-xxl-3">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="E-Mail">
        </label>

        <label class="col-12 col-xxl-3">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="Phone">
        </label>

        <label class="col-12">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="Message">
        </label>

        <button class="btn btn-dark text-white mt-5">Send</button>
    </form>
</section>

<section class="row row-cols-1 small fw-bolder"
         style="background-color: #000; color: #FFF; font-family: Roboto, sans-serif; font-size: 15px">
    <div class="col col-sm-6 offset-sm-3 p-4 px-sm-1 my-sm-5">
        <div class="px-xxl-5">
            <div class="px-xxl-5">
                <div class="row row-cols-2 row-cols-sm-3 px-4 py-xxl-4">
                    <img src="https://digital.cigna.com/static/digital-cigna-com/img/google-play-badge.svg"
                         class="img-fluid"/>
                    <img src="https://digital.cigna.com/static/digital-cigna-com/img/amazon-appstore-badge.svg"
                         class="img-fluid d-none d-sm-block"/>
                    <img src="https://digital.cigna.com/static/digital-cigna-com/img/apple-app-store-badge.svg"
                         class="img-fluid"/>
                </div>
            </div>
        </div>
    </div>

    <div class="col px-xxl-5">
        <div class="row row-cols-1 row-cols-sm-4 px-xxl-5">
            <div class="col px-5 mb-4">
                <p class="text-muted mb-5">Rental</p>
                <p>Plans</p>
                <p>Features</p>
                <p>Devices</p>
                <p>Help</p>
                <p>About us</p>
                <p>Careers</p>
            </div>
            <div class="col px-5 mb-4">
                <p class="text-muted mb-5">Explore</p>
                <p>All Channels</p>
                <p>Charts</p>
                <p>Most popular release</p>
                <p>New Releases</p>
                <p>Stay at home</p>
            </div>
            <div class="col px-5 mb-4">
                <p class="text-muted mb-5">Who are we?</p>
                <p>Owe & vehicles</p>
                <p>Developers</p>
                <p>Press</p>
            </div>
            <div class="col px-5 mb-4">
                <p class="text-muted mb-5">Legal</p>
                <p>Legal information</p>
                <p>Term and Conditions of Use</p>
                <p>Privacy Policy</p>
                <p>Cookies</p>
            </div>
        </div>
    </div>

    <div class="col col-sm-12 px-5 my-4 text-center">
        <div class="d-sm-none px-5 mx-5 mb-5">
            <img src="img/png/Icon.png" class="img-fluid"/>
        </div>
        <div class="row d-flex align-items-center">
            <div class="col-xxl-4 px-sm-5">
                <div class="row row-cols-4 g-5 px-5">
                    <svg class="text-white" fill="currentColor" height="20" width="20" viewBox="0 0 12 12"
                         aria-hidden="true">
                        <path d="M9.205 6.6L9.5 4.393H7.136V3.031c.083-.617.263-1.038 1.187-1.038L9.5 1.992V0H7.727C6.084 0 4.922.994 4.922 2.82v1.573H3v2.133l1.773.074V12h2.363V6.6h2.069z"></path>
                    </svg>
                    <svg class="text-white" fill="currentColor" height="20" width="20" viewBox="0 0 12 12"
                         aria-hidden="true">
                        <path d="M 6 1.0815 c 1.602 0 1.792 0.006 2.425 0.035 c 1.626 0.074 2.3855 0.8455 2.4595 2.4595 c 0.029 0.6325 0.0345 0.8225 0.0345 2.4245 c 0 1.6025 -0.006 1.792 -0.0345 2.4245 c -0.0745 1.6125 -0.832 2.3855 -2.4595 2.4595 c -0.633 0.029 -0.822 0.035 -2.425 0.035 c -1.602 0 -1.792 -0.006 -2.4245 -0.035 c -1.63 -0.0745 -2.3855 -0.8495 -2.4595 -2.46 c -0.029 -0.6325 -0.035 -0.822 -0.035 -2.4245 c 0 -1.602 0.0065 -1.7915 0.035 -2.4245 c 0.0745 -1.6135 0.832 -2.3855 2.4595 -2.4595 c 0.633 -0.0285 0.8225 -0.0345 2.4245 -0.0345 z m 0 -1.0815 c -1.6295 0 -1.8335 0.007 -2.4735 0.036 c -2.179 0.1 -3.39 1.309 -3.49 3.49 c -0.0295 0.6405 -0.0365 0.8445 -0.0365 2.474 c 0 1.6295 0.007 1.834 0.036 2.474 c 0.1 2.179 1.309 3.39 3.49 3.49 c 0.6405 0.029 0.8445 0.036 2.474 0.036 c 1.6295 0 1.834 -0.007 2.474 -0.036 c 2.177 -0.1 3.391 -1.309 3.4895 -3.49 c 0.0295 -0.64 0.0365 -0.8445 0.0365 -2.474 c 0 -1.6295 -0.007 -1.8335 -0.036 -2.4735 c -0.098 -2.177 -1.3085 -3.39 -3.4895 -3.49 c -0.6405 -0.0295 -0.845 -0.0365 -2.4745 -0.0365 z m 0 2.919 c -1.7015 0 -3.081 1.3795 -3.081 3.081 s 1.3795 3.0815 3.081 3.0815 s 3.081 -1.3795 3.081 -3.0815 c 0 -1.7015 -1.3795 -3.081 -3.081 -3.081 z m 0 5.081 c -1.1045 0 -2 -0.895 -2 -2 c 0 -1.1045 0.8955 -2 2 -2 s 2 0.8955 2 2 c 0 1.105 -0.8955 2 -2 2 z m 3.203 -5.9225 c -0.398 0 -0.7205 0.3225 -0.7205 0.72 s 0.3225 0.72 0.7205 0.72 c 0.3975 0 0.7195 -0.3225 0.7195 -0.72 s -0.322 -0.72 -0.7195 -0.72 z"></path>
                    </svg>
                    <svg class="text-white" fill="currentColor" height="20" width="20" viewBox="0 0 12 12"
                         aria-hidden="true">
                        <path d="M12 2.404a4.923 4.923 0 0 1-1.414.388 2.47 2.47 0 0 0 1.082-1.362 4.922 4.922 0 0 1-1.563.597A2.462 2.462 0 0 0 5.91 4.272 6.99 6.99 0 0 1 .836 1.702a2.46 2.46 0 0 0 .762 3.287 2.449 2.449 0 0 1-1.115-.309v.031c0 1.193.848 2.188 1.974 2.414a2.462 2.462 0 0 1-1.111.042 2.465 2.465 0 0 0 2.3 1.71A4.942 4.942 0 0 1 0 9.896a6.97 6.97 0 0 0 3.774 1.106c4.528 0 7.004-3.752 7.004-7.005 0-.107-.002-.213-.007-.318.481-.348.898-.781 1.229-1.275"></path>
                    </svg>
                    <svg class="text-white" fill="currentColor" height="20" width="20" viewBox="0 0 12 12"
                         aria-hidden="true">
                        <path d="M 9.8075 1.592 c -1.802 -0.123 -5.8155 -0.1225 -7.615 0 c -1.9485 0.133 -2.178 1.31 -2.1925 4.408 c 0.0145 3.0925 0.242 4.2745 2.1925 4.408 c 1.8 0.1225 5.813 0.123 7.615 0 c 1.9485 -0.133 2.178 -1.31 2.1925 -4.408 c -0.0145 -3.0925 -0.242 -4.2745 -2.1925 -4.408 z m -5.3075 6.408 v -4 l 4 1.9965 l -4 2.0035 z"></path>
                    </svg>
                </div>
            </div>
            <div class="d-none d-xxl-block col-xxl-4 p-5">
                <img src="img/png/Icon.png" height="48"/>
            </div>
            <div class="col-xxl-4 text-muted text-center py-5">
                <span>&copy; Joan</span>
                <select class="border-0" style="background-color: #000; color: #FFF" aria-label="English (us)">
                    <option selected>English (us)</option>
                    <option value="1">Español (co)</option>
                    <option value="2">Italiano</option>
                </select>
            </div>
        </div>
    </div>
</section>

<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
